import React, {PureComponent} from 'react'
// import {connect} from 'react-redux'
import {withRouter} from 'react-router-dom'
import './index.scss'

import messageImg from '../../images/message.png'

/**
 * @PureComponent 用于较少修改组件时，省略了shouldComponentUpdate
 * 可以浅比较 props 和 state 是否有变化,至于为什么不深比较?因为那样效率可能会比全部render还低
 * https://segmentfault.com/a/1190000018549047
 * */

class Tabbar extends PureComponent {
  state = {
    tabbarList: [
      {
        name: '消息',
        href: '/home',
        icon: messageImg
      },
      {
        name: '通讯录',
        href: '/mail',
        icon: messageImg
      },
      {
        name: '发现',
        href: '/discover',
        icon: messageImg
      },
      {
        name: '我',
        href: '/my',
        icon: messageImg
      }
    ]
  }

  // 跳转页面
  tabClick(tab) {
    if (tab.href !== this.props.match.path) {
      this.props.history.push(tab.href)
    }
  }

  render() {
    return (
      <section className="tabbar-container">
        <ul>
          {
            this.state.tabbarList.map(item => {
              return (
                <li className="tabbar-item" key={item.href}
                    onClick={this.tabClick.bind(this, item)}
                >
                  <img src={item.icon} alt="" className="tabbar-icon"/>
                  <p className="tabbar-name">{item.name}</p>
                </li>
              )
            })
          }
        </ul>
      </section>
    );
  }
}

export default withRouter(Tabbar)